<template>
  <el-card class="completed-task-card">
    <div class="task-header">
      <div class="task-info">
        <h3>{{ task.skillName }}</h3>
        <el-tag type="success">已完成</el-tag>
      </div>
      <div class="task-actions">
        <el-button type="success" @click="showProduceDialog = true">填写产出</el-button>
        <el-button type="primary" @click="$emit('show-detail', task)">查看详情</el-button>
      </div>
    </div>

    <div class="task-meta">
      <div class="meta-item">
        <el-icon><Calendar /></el-icon>
        <span>完成时间：{{ formatDate(task.completedTime) }}</span>
      </div>
      <div class="meta-item">
        <el-icon><Timer /></el-icon>
        <span>用时：{{ calculateDuration }}</span>
      </div>
    </div>

    <div class="task-summary">
      <div class="summary-item">
        <span class="label">总节点数</span>
        <span class="value">{{ getTotalNodesCount }}</span>
      </div>
      <div class="summary-item">
        <span class="label">完成率</span>
        <span class="value">100%</span>
      </div>
    </div>
    <div v-if="task.produce || produce" class="produce-content">
      <el-icon class="produce-icon"><Document /></el-icon>
      <span class="produce-label">产出：</span>
      <span class="produce-value">{{ task.produce || produce }}</span>
    </div>
  </el-card>
  <el-dialog v-model="showProduceDialog" title="填写产出" width="400px">
    <el-input
      v-model="produceInput"
      type="textarea"
      :rows="5"
      placeholder="请输入产出内容"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showProduceDialog = false">取消</el-button>
        <el-button type="primary" @click="handleProduceSubmit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Calendar, Timer, Document } from '@element-plus/icons-vue'
import { produce as produceApi } from '@/api/skill'
import { ElMessage } from 'element-plus'

const showProduceDialog = ref(false)
const produceInput = ref('')
const produce = ref('')

const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['show-detail'])

// 计算属性
const getTotalNodesCount = computed(() => {
  return props.task.stages.reduce((total, stage) => total + stage.nodes.length, 0)
})

const calculateDuration = computed(() => {
  const start = new Date(props.task.createTime)
  const end = new Date(props.task.completedTime)
  const diff = end - start
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  
  if (days > 0) {
    return `${days}天${hours}小时`
  } else if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  } else {
    return `${minutes}分钟`
  }
})

// 方法
const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 监听弹窗打开时初始化输入框
watch(showProduceDialog, (val) => {
  if (val) {
    produceInput.value = props.task.produce || ''
  }
})

const handleProduceSubmit = async () => {
  try {
    const res = await produceApi({ id: props.task.id, produce: produceInput.value })
    if (res.data && res.data.success) {
      produce.value = produceInput.value
      showProduceDialog.value = false
      ElMessage.success('产出填写成功')
    } else {
      ElMessage.error(res.data?.message || '产出填写失败')
    }
  } catch (e) {
    ElMessage.error('产出填写失败')
  }
}
</script>

<style scoped>
.completed-task-card {
  margin-bottom: 24px;
  background: linear-gradient(120deg, #f0f9eb 0%, #e8f6ff 100%);
  border: 1.5px solid #e1f3d8;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(64, 158, 255, 0.07);
  transition: box-shadow 0.3s;
}
.completed-task-card:hover {
  box-shadow: 0 8px 32px 0 rgba(64, 158, 255, 0.13);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.task-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.task-info h3 {
  margin: 0;
  font-size: 18px;
  color: #3180e8;
  font-weight: 600;
  letter-spacing: 1px;
}

.task-actions {
  display: flex;
  gap: 10px;
}

.task-actions .el-button {
  border-radius: 20px;
  font-size: 14px;
  padding: 6px 22px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  transition: background 0.2s, color 0.2s;
}
.task-actions .el-button.success {
  background: linear-gradient(90deg, #67c23a 0%, #b3e19d 100%);
  color: #fff;
}
.task-actions .el-button.primary {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
}

.task-meta {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  color: #606266;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-item .el-icon {
  font-size: 17px;
  color: #67c23a;
}

.task-summary {
  display: flex;
  gap: 32px;
  padding-top: 18px;
  border-top: 1.5px dashed #e1f3d8;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.summary-item .label {
  font-size: 13px;
  color: #909399;
}

.summary-item .value {
  font-size: 20px;
  font-weight: 600;
  color: #67c23a;
}

.produce-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(90deg, #e3f0fd 0%, #f9f9f9 100%);
  border-left: 4px solid #3180e8;
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 22px;
  box-shadow: 0 2px 8px rgba(49,128,232,0.06);
  font-size: 15px;
}
.produce-icon {
  color: #3180e8;
  font-size: 20px;
  margin-right: 2px;
  margin-top: 2px;
}
.produce-label {
  color: #3180e8;
  font-weight: 600;
  margin-right: 4px;
}
.produce-value {
  color: #222;
  font-size: 15px;
  word-break: break-all;
}

/* 优化弹窗样式 */
:deep(.el-dialog__header) {
  font-size: 18px;
  font-weight: 600;
  color: #3180e8;
  border-bottom: 1px solid #e3f0fd;
  padding-bottom: 8px;
}
:deep(.el-dialog__body) {
  padding-top: 18px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px 0 20px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .completed-task-card {
    padding: 8px;
  }
  .task-header {
    flex-direction: column;
    gap: 12px;
  }
  .task-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .task-meta {
    flex-direction: column;
    gap: 12px;
  }
  .task-summary {
    flex-direction: column;
    gap: 16px;
  }
  .summary-item {
    flex-direction: row;
    justify-content: space-between;
  }
  .produce-content {
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px;
    font-size: 14px;
  }
}
</style> 